import { defineComponent, ref } from 'vue'
import SpsTableSelect from '@/components/lib/TableSelect'

interface Goods {
  id: string
  name: string
  price: number
}

const testData: Goods[] = [
  { id: '1', name: '牛奶', price: 5 },
  { id: '2', name: '鸡蛋', price: 1 },
  { id: '3', name: '猪肉', price: 15 }
]

export default defineComponent({
  name: 'TableSelectView',
  setup() {
    const pageRef = ref(0)
    /* render 函数 */
    return () => {
      return (
        <div>
          {/* <SpsTableSelect
            tableAttrs={{
              rowKey: 'id',
              columns: [
                { title: 'ID', dataIndex: 'id' },
                { title: '商品名', dataIndex: 'name' },
                { title: '价格', dataIndex: 'price' }
              ],
              pagination: {
                pageSize: 2
              }
            }}
            modalAttrs={{
              title: '选择商品'
            }}
            options={testData}>
            选择商品
          </SpsTableSelect> */}
          <SpsTableSelect
            multiple={true}
            tableAttrs={{
              rowKey: 'id',
              columns: [
                { title: 'ID', dataIndex: 'id' },
                { title: '商品名', dataIndex: 'name' },
                { title: '价格', dataIndex: 'price' }
              ]
            }}
            modalAttrs={{
              title: '选择商品'
            }}
            paginationAttrs={{
              pageSize: 2,
              total: 3
            }}
            options={testData.slice(pageRef.value * 2, (pageRef.value + 1) * 2)}
            pageChange={(page) => (pageRef.value = page - 1)}>
            选择商品
          </SpsTableSelect>
        </div>
      )
    }
  }
})
